<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="蜂窝布局.css">
</head>
<body>
  <div class="wrapper">
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
  <script>
    var wrapperDom = document.getElementsByClassName('wrapper')[0]
    var lineLenth = wrapperDom.children.length
    function debounce(fn, delay = 0) {
      let timer = null
      return function() {
        if(timer)
          clearTimeout(timer)
        timer = setTimeout(() => {
          fn.apply(this, arguments)
        }, delay)
      }
    }
    const mouseEnterFn = debounce(function(event) {
      // event.stopImmediatePropagation()
      // console.log(event)
      // let lineIndex = event.target.lineIndex
      let target = event.target
      if(target.classList.contains('item')) {
        // 事件委托子元素
        let lineNode = target.parentNode
        let lineIndex = lineNode.lineIndex
        let isOdd = !!(lineIndex % 2)
        let itemIndex = target.itemIndex
        clearAllHoverClass()
        target.classList.add('hover')
        lineNode.children[itemIndex - 1]?.classList?.add('hover')
        lineNode.children[itemIndex + 1]?.classList?.add('hover')

        if(isOdd) { // 奇数行
          // 处理上一行
          wrapperDom.children[lineIndex - 1]?.children[itemIndex - 1]?.classList?.add('hover')
          wrapperDom.children[lineIndex - 1].children[itemIndex]?.classList?.add('hover')
          if(lineIndex < lineLenth - 1) {
            // 处理下一行
            wrapperDom.children[lineIndex + 1].children[itemIndex - 1]?.classList?.add('hover')
            wrapperDom.children[lineIndex + 1].children[itemIndex]?.classList?.add('hover')
          }
        } else { // 偶数行处理
          if(lineIndex != 0) {
            // 处理上一行
            wrapperDom.children[lineIndex - 1].children[itemIndex]?.classList?.add('hover')
            wrapperDom.children[lineIndex - 1].children[itemIndex + 1]?.classList?.add('hover')
          }
          if(lineIndex < lineLenth - 1) {
            // 处理下一行
            wrapperDom.children[lineIndex + 1].children[itemIndex]?.classList?.add('hover')
            wrapperDom.children[lineIndex + 1].children[itemIndex + 1]?.classList?.add('hover')
          }
        }
      }

    })

    function clearAllHoverClass() {
      document.querySelectorAll('.item').forEach(item => {
        item.classList.remove('hover')
      })
    }

    let lineElems = document.getElementsByClassName('line')
    // console.log(lineElems)
    Array.from(lineElems).forEach((line, index) => {
      // line.setAttribute('lineIndex', index + 1)
      line.lineIndex = index
      line.addEventListener('mouseover', mouseEnterFn)
      Array.from(line.children).forEach((item, i) => {
        // console.log(item)
        item.itemIndex = i
        item.style.backgroundImage =  `url('https://picsum.photos/100/100?line=${index}&item=${i}')`
      })
    })
  </script>
</body>
</html>